<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
    <title>查询项目信息</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">

    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        h2 {
            text-align: center;
            margin-bottom: 20px;
        }
        .top-bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }
        .search-box {
            flex-grow: 1;
            position: relative;
        }
        .search-box input[type="text"] {
            padding: 10px 20px;
            width: 200px;
            border: 2px solid #ddd;
            border-radius: 5px;
            outline: none;
            transition: border-color 0.3s;
        }
        .search-box input[type="text"]:focus {
            border-color: #007bff;
        }
        .search-box button {
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
            padding: 8px 15px;
            border: none;
            background-color: #007bff;
            color: white;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        .search-box button:hover {
            background-color: #0056b3;
        }
        .pagination {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: 20px;
        }
        .pagination a, .pagination select {
            margin: 0 5px;
            padding: 5px 10px;
            text-decoration: none;
            border: 1px solid #ddd;
            color: #007bff;
            border-radius: 5px;
            transition: background-color 0.3s, color 0.3s;
        }
        .pagination a:hover, .pagination select:hover {
            background-color: #007bff;
            color: white;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 20px;
        }
        table, th, td {
            border: 1px solid #ddd;
        }
        th, td {
            padding: 12px;
            text-align: left;
        }
        th {
            background-color: #f2f2f2;
        } .status-dot {
              height: 10px;
              width: 10px;
              border-radius: 50%;
              display: inline-block;
              margin-right: 5px;
          }
        .status-pending {
            background-color: orange;
        }
        .status-active {
            background-color: green;
        }
        .status-completed {
            background-color: blue;
        }
        .status-rejected {
            background-color: red;
        }
    </style>
    <script>
        function getSelectedIds() {
            var selectedIds = [];
            document.querySelectorAll('input[name="selectProject"]:checked').forEach(function(checkbox) {
                selectedIds.push(checkbox.value);
            });
            return selectedIds;
        }

        function deleteSelected() {
            var selectedIds = getSelectedIds();
            if (selectedIds.length === 0) {
                alert("请选择要删除的项目");
                return;
            }
            if (confirm("确定要删除选中的项目吗？")) {
                var form = document.createElement("form");
                form.method = "post";
                form.action = "deleteproject";
                selectedIds.forEach(function(id) {
                    var input = document.createElement("input");
                    input.type = "hidden";
                    input.name = "projectIds";
                    input.value = id;
                    form.appendChild(input);
                });
                document.body.appendChild(form);
                form.submit();
            }
        }

        function deleteSingle(id) {
            if (confirm("确定要删除这个项目吗？")) {
                var form = document.createElement("form");
                form.method = "post";
                form.action = "deleteproject";
                var input = document.createElement("input");
                input.type = "hidden";
                input.name = "projectIds";
                input.value = id;
                form.appendChild(input);
                document.body.appendChild(form);
                form.submit();
            }
        }
        function editProject(id) {
            window.location.href = 'getprojectbyid?projectId=' + id;
        }
    </script>
</head>
<body>
<h2>项目管理</h2>

<div class="top-bar">
    <div class="search-box">
        <form action="queryprojectbyname" method="get">
            <input type="text" id="projectName" name="projectName" placeholder="输入项目名称">
            <button type="submit" style="position:relative;left:0%;top:20px;">查询</button>
        </form>
    </div>
</div>

<table>
    <thead>
    <tr>
        <th><input type="checkbox" id="selectAll"></th>
        <th>项目ID</th>
        <th> 项目名字</th>
        <th>导师ID</th>
        <th>导师名字</th>
        <th>项目类型</th>
        <th>开始时间</th>
        <th>结束时间</th>
        <th>项目状态</th>
        <th>项目简述</th>
        <th>成员</th>
        <th>
            <button type="button" class="btn btn-danger" onclick="deleteSelected()">批量删除</button>
        </th>
    </tr>
    </thead>
    <tbody>
    <c:forEach var="project" items="${projects}">
        <tr>
            <td><input type="checkbox" name="selectProject" value="${project.protectId}"></td>
            <td>${project.protectId}</td>
            <td>${project.projectName}</td>
            <td>${project.postId}</td>
            <td>${project.postName}</td>
            <td>${project.type}</td>
            <td>${project.startTime}</td>
            <td>${project.endTime}</td>
            <td>
                <c:choose>
                    <c:when test="${project.status == 0}">
                        <span class="status-dot status-pending"></span> <span style="color:orange">审核中 </span>
                    </c:when>
                    <c:when test="${project.status == 1}">
                        <span class="status-dot status-active"></span>  <span style="color:green"> 进行中</span>
                    </c:when>
                    <c:when test="${project.status == 2}">
                        <span class="status-dot status-completed"></span>  <span style="color:blue"> 已结束</span>
                    </c:when>
                    <c:when test="${project.status == 3}">
                        <span class="status-dot status-rejected"></span> <span style="color:red"> 已驳回</span>
                    </c:when>
                    <c:otherwise>
                        未知状态
                    </c:otherwise>
                </c:choose>
            </td>
            <td>${project.description}</td>
            <td>${project.members}</td>
            <td>
                <button type="button" class="btn btn-danger btn-sm" onclick="deleteSingle(${project.protectId})">删除</button>
                <button type="button" class="btn btn-success btn-sm" onclick="editProject(${project.protectId})">修改</button>
            </td>
        </tr>
    </c:forEach>
    </tbody>
</table>

<div class="pagination">
    <form id="pageSizeForm" action="pageproject" method="get">
        <label for="pageSize">每页显示:</label>
        <select id="pageSize" name="pageSize" onchange="document.getElementById('pageSizeForm').submit()">
            <option value="5" ${pageSize == 5 ? 'selected' : ''}>5</option>
            <option value="10" ${pageSize == 10 ? 'selected' : ''}>10</option>
            <option value="15" ${pageSize == 15 ? 'selected' : ''}>15</option>
        </select>
        <input type="hidden" name="page" value="${currentPage}" />
    </form>

    <c:forEach var="i" begin="1" end="${totalPage}">
        <a href="pageproject?page=${i}&pageSize=${pageSize}" ${currentPage == i ? 'style="font-weight:bold"' : ''}>${i}</a>
    </c:forEach>
</div>

<script>
    // document.addEventListener("DOMContentLoaded", function() {
    //     if (!window.location.search.includes("page") && !window.location.search.includes("cid")) {
    //         window.location.href = "pageproject?page=1&pageSize=10";
    //     }
    // });
    document.addEventListener("DOMContentLoaded", function() {
        document.getElementById("selectAll").addEventListener("change", function() {
            var checkboxes = document.querySelectorAll('input[name="selectProject"]');
            checkboxes.forEach(function(checkbox) {
                checkbox.checked = this.checked;
            }, this);
        });
    });
    document.addEventListener("DOMContentLoaded", function() {
        if (!window.location.search) {
            window.location.href = "pageproject?page=1&pageSize=10";
        }
    });
</script>

</body>
</html>
